<template>
  <div>
    <h3>文件浏览器</h3>
    <span class="remark">*点击＋号上传文件，点击文件列表下载文件</span>
    <a href="javascript:;" class="add-btn"><div class="add-icon">+<input type="file" class="updata" @change="upload"></div></a>
    <ul>
      <li v-for="(item, i) in list" :key="i"><a href="javascipt:;" @click="download(item)">{{item}}</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: []
    }
  },
  created (){
    this.fetchData()
  },
  methods: {
    fetchData () {
      const self = this
      self.$api.file.get().then(res => {
        console.log(res)
        if(res.success){
          self.list = res.data
        }
      })
    },
    download (fileName) {
      window.open('http://localhost:3000/api/download/'+fileName, '_blank')
    },
    upload(e){
      const self = this
      const file = e.target.files[0]
      let form = new FormData()
      form.append('file', file)
      self.$api.file.add(form).then( res => {
        console.log(res)
        if(res.success){
          self.fetchData()
          window.alert('上传成功')
        }
      })
    }
  }
}
</script>
<style>
  .remark{
    color: red;
    font-size: 12px;
  }
  a.add-btn {
    width: 65px;
    display: block;
    text-decoration: none;
    margin: 15px;
  }
  .add-icon {
    border: dashed 2px #c0c4cc;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    color: #ccc;
    border-radius: 5px;
    margin: 15px 5px;
    position: relative;
   }
  .add-icon input.updata {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    width: 90px;
    overflow: hidden;
  }
</style>

 